<template>
    <div id="articleAdmin">
        <el-tabs v-model="status">
            <el-tab-pane label="公告列表" name="0">
                <el-input
                        v-model="queryParams.titleOrContent"
                        placeholder="请输入关键词搜索"
                        style="width: 300px;margin-bottom: 20px">
                    <el-button slot="append" icon="el-icon-search" @click="getData" circle></el-button>
                </el-input>
                <el-collapse v-for="(item, index) in articleData" :key="index" @change="handleChange" accordion>
                    <el-collapse-item :title="item.title">
                        <time class="time video-createtime">{{ item.createTime|timestampToTime }}</time>
                        <div v-html="item.content">
                        </div>
                        <el-button @click="updateArticle(item)" type="text">修改公告</el-button>
                    </el-collapse-item>
                </el-collapse>
                <el-divider v-if="articleData.length == 0">暂无公告</el-divider>
                <!-- 分页组件 -->
                <Pagination v-bind:child-msg="pageparm" @callFather="pageCallFather"></Pagination>
            </el-tab-pane>
            <el-tab-pane label="发布公告" name="1">
                <el-input
                        v-model="params.title"
                        placeholder="请输入标题"
                        suffix-icon="el-icon-date"
                        style="width: 300px;margin-bottom: 20px">
                </el-input>
                <quillEditor
                        v-model="params.content"
                        ref="myQuillEditor"
                        :options="editorOption"
                        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                        @change="onEditorChange($event)">
                </quillEditor>
                <el-button style="margin: auto" type="primary" icon="el-icon-search" @click="insert">发布</el-button>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import { insertArticle, updateArticle, selectArticle} from "@/api/adminFun";
    import {Loading, Message, MessageBox} from 'element-ui';
    import Pagination from "@/components/Pagination";
    import { quillEditor } from "vue-quill-editor"; //调用编辑器
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';

    export default {
        name: "articleAdmin",
        components: {
            Pagination,
            quillEditor
        },
        data() {
            return {
                status: '0',

                activeNames: ['1'],

                params: {
                    id: '',
                    title: '',
                    content: '',
                },

                queryParams: {
                    pageIndex: 0,
                    pageSize: 20,
                    titleOrContent: ''
                },
                pageparm: {
                    currentPage: 1,
                    pageSize: 20,
                    total: 0
                },
                articleData: [],

                editorOption: {
                    theme: 'snow',
                    placeholder: '编辑文章内容',
                    height: 300
                },
            }
        },

        created() {
            this.getData();
        },
        methods: {
            clearDate(){
                this.params = {
                    id: '',
                    title: '',
                    content: '',
                }
            },
            getData(){
                selectArticle(this.queryParams).then(res=>{
                    if (res.status == 200){
                        this.articleData = res.data.data;
                        this.pageparm.total = res.data.totalCount;
                    }else {
                        Message.error(res.message);
                    }
                })
            },
            // 分页插件事件
            pageCallFather(param) {
                this.queryParams.pageIndex = param.currentPage - 1;
                this.queryParams.pageSize = param.pageSize;
                this.getData();
            },
            handleChange(val) {
                console.log(val);
            },
            onEditorReady (editor) { // 准备编辑器
            },
            onEditorBlur () {}, // 失去焦点事件
            onEditorFocus () {}, // 获得焦点事件
            onEditorChange () {}, // 内容改变事件
            saveHtml (event) {
                alert(this.params.content)
            },

            updateArticle(item){
                this.params = {
                    id: item.id,
                    title: item.title,
                    content: item.title
                }
                this.status = '1';
            },

            insert(){
                if (this.params.title == null || this.params.content == null
                ||this.params.title == '' || this.params.content == '') {
                    Message.warning("公告标题和内容不能为空");
                    return;
                }
                if (this.params.id != null && this.params.id != '') {
                    updateArticle(this.params).then(res=>{
                        if (res.status == 200){
                            this.getData();
                            this.clearDate();
                            this.status = '0'
                        }else {
                            Message.error(res.message);
                        }
                    })
                }else {
                    insertArticle(this.params).then(res=> {
                        if (res.status == 200) {
                            this.getData();
                            this.clearDate();
                            this.status = '0'
                        } else {
                            Message.error(res.message);
                        }
                    })
                }
            }
        },
        computed: {
            editor () {
                return this.$refs.myQuillEditor.quill
            }
        },
        mounted() {

        }
    }
</script>

<style>
    #articleAdmin .el-tabs__item{
        color: white;
    }
    #articleAdmin .el-tabs__item.is-active {
        color: #f3cd20;
    }
    #articleAdmin .el-tabs__active-bar {
        background-color: #f3cd20;
    }

    #articleAdmin .el-collapse-item__header{
        font-size: large;
        color: white;
        background-color: #272727;
    }
    #articleAdmin .el-collapse-item__wrap{
        background-color: #272727;
    }
    #articleAdmin .el-collapse-item__content{
        font-size: medium;
        color: white;
    }

    #articleAdmin .ql-editor{
        height: 400px;
    }

    #articleAdmin .el-input__inner{
        color: white;
        background: rgba(0, 0, 0, 0);
    }

    #articleAdmin .el-divider__text{
        background-color: #272727;
        color: white;
    }
    #articleAdmin .el-table th, .el-table .el-table__row{
        background: rgb(48, 49, 51);
    }
    #articleAdmin .el-table th, .el-table .el-table__row:hover{
        color: #f3cd20;
    }
</style>
